<template>
  <div class="menu-group">
    <div class="menu-group-header" @click="toggleGroup">
      <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
      <span class="group-title">{{ item.title }}</span>
      <el-badge v-if="item.badge" :value="item.badge" :max="99" class="menu-badge" />
      <el-tag v-if="item.tag" size="small" :type="item.tagType || 'info'" class="menu-tag">
        {{ item.tag }}
      </el-tag>
      <span class="group-count">{{ item.children?.length || 0 }}项</span>
      <el-icon class="group-arrow" :class="{ 'is-expanded': isExpanded }">
        <ArrowDown />
      </el-icon>
    </div>
    
    <div v-show="isExpanded" class="menu-group-content">
      <div class="group-categories">
        <div 
          v-for="category in groupedChildren" 
          :key="category.name"
          class="category-section"
        >
          <div class="category-header">{{ category.name }}</div>
          <div class="category-items">
            <div 
              v-for="child in category.items" 
              :key="child.path"
              class="group-menu-item"
              @click="handleMenuClick(child)"
            >
              <span class="item-title">{{ child.title }}</span>
              <el-badge v-if="child.badge" :value="child.badge" :max="99" class="item-badge" />
              <el-tag v-if="child.tag" size="small" :type="child.tagType || 'info'" class="item-tag">
                {{ child.tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

interface MenuItem {
  title: string
  path: string
  icon?: any
  children?: MenuItem[]
  badge?: number | string
  tag?: string
  tagType?: 'success' | 'warning' | 'danger' | 'info'
  external?: boolean
  disabled?: boolean
  hidden?: boolean
  permission?: string
}

interface GroupedCategory {
  name: string
  items: MenuItem[]
}

const props = defineProps<{
  item: MenuItem
}>()

const emit = defineEmits<{
  menuClick: [item: MenuItem]
}>()

const isExpanded = ref(false)

// 将子菜单按功能分组
const groupedChildren = computed((): GroupedCategory[] => {
  if (!props.item.children || props.item.children.length === 0) {
    return []
  }

  const groups: { [key: string]: MenuItem[] } = {}
  
  props.item.children.forEach(child => {
    // 根据标题特征进行分组
    let groupName = '其他'
    
    if (child.title.includes('管理') || child.title.includes('员工') || child.title.includes('角色')) {
      groupName = '人员管理'
    } else if (child.title.includes('站点') || child.title.includes('账号')) {
      groupName = '站点管理'
    } else if (child.title.includes('收费') || child.title.includes('服务')) {
      groupName = '服务管理'
    } else if (child.title.includes('物流') || child.title.includes('运费') || child.title.includes('包裹')) {
      groupName = '物流管理'
    } else if (child.title.includes('工作流') || child.title.includes('卖家') || child.title.includes('汇率') || child.title.includes('推送')) {
      groupName = '系统配置'
    }
    
    if (!groups[groupName]) {
      groups[groupName] = []
    }
    groups[groupName].push(child)
  })

  return Object.entries(groups).map(([name, items]) => ({
    name,
    items
  }))
})

function toggleGroup() {
  isExpanded.value = !isExpanded.value
}

function handleMenuClick(item: MenuItem) {
  emit('menuClick', item)
}
</script>

<style scoped>
.menu-group {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fff;
}

.menu-group-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  background: #fafbfc;
  border-bottom: 1px solid #e4e7ed;
  transition: background-color 0.2s;
}

.menu-group-header:hover {
  background: #f0f2f5;
}

.group-title {
  flex: 1;
  font-weight: 600;
  color: #303133;
  margin-left: 8px;
}

.group-count {
  font-size: 12px;
  color: #909399;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.group-arrow {
  margin-left: 8px;
  transition: transform 0.2s;
  color: #909399;
}

.group-arrow.is-expanded {
  transform: rotate(180deg);
}

.menu-group-content {
  padding: 16px;
}

.group-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-section {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background: #fafbfc;
}

.category-header {
  padding: 8px 12px;
  background: #f0f2f5;
  border-bottom: 1px solid #e4e7ed;
  font-size: 12px;
  font-weight: 600;
  color: #606266;
}

.category-items {
  padding: 8px;
}

.group-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
  margin-bottom: 4px;
}

.group-menu-item:hover {
  background: #f0f2f5;
}

.group-menu-item:last-child {
  margin-bottom: 0;
}

.item-title {
  flex: 1;
  font-size: 13px;
  color: #606266;
}

.item-badge {
  margin-left: 8px;
}

.item-tag {
  margin-left: 8px;
  font-size: 10px;
}

.menu-badge {
  margin-left: 8px;
}

.menu-tag {
  margin-left: 8px;
  font-size: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .menu-group-header {
    padding: 10px 12px;
  }
  
  .menu-group-content {
    padding: 12px;
  }
  
  .group-categories {
    gap: 12px;
  }
}
</style>


